<template>
  <div class="index-box" ref="index">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
      <!-- <div class="search" ref="search">
          <el-form :inline="true" :model="searchForm" size="small" ref="searchForm" @submit.native.prevent class="demo-form-inline" id="searchBox">
            <el-form-item prop="name">
                <el-input v-model="searchForm.name" clearable placeholder="配置名称"></el-input>
            </el-form-item>
           <el-form-item prop="status">
             <el-select filterable clearable v-model="searchForm.status" placeholder="状态">
               <el-option label="启用" value="1" ></el-option>
               <el-option label="禁用" value="0" ></el-option>
             </el-select>
           </el-form-item>
            <el-form-item prop="createTime">
              <el-date-picker v-model="createTime" type="daterange" align="right" unlink-panels range-separator="至"
                start-placeholder="创建开始日期" end-placeholder="创建结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
            <el-form-item class="clearfix">
              <el-button type="primary" @click="handleSearch()" icon="el-icon-search">搜索</el-button>
              <el-button icon="el-icon-refresh" size="small" @click="resetSearch">重置</el-button>
            </el-form-item>
          </el-form>
        </div> -->
        <div class="actionBtn" ref="actionBtn">
          <div class="actionBtnLeft">
             <el-button type="primary" @click="handleAdd()" size="small"  icon="el-icon-plus"  >添加配置</el-button>
             <div ref="qrcode333"></div>
          </div>
          <div class="actionBtnRight">
              <MyRefresh></MyRefresh>
            <!--  <MyTableColumnSet :tableColumn.sync="tableColumn" :hideTableColumn.sync="hideTableColumn" :tableColumnType.sync="tableColumnType"></MyTableColumnSet> -->
          </div>
        </div>

        <div class="table" ref="table">
          <el-table :data="dataList" style="width: 100%;"  border :height="tableHeight" @selection-change="handleSelectionChange"  stripe v-loading="loading">

            <el-table-column prop="couponId" label="消费券id"  width="190" align="center"></el-table-column>
            <!-- <el-table-column prop="name" label="背景图"  width="400" align="center">
              <template #default="scope">
                <img :src="scope.row.couponImage" alt="" style="width: 100px;" />
              </template>
            </el-table-column> -->
             <el-table-column prop="couponName" label=" 优惠券类型" align="center">
               <template #default="scope">
                 <span>{{ scope.row.couponType=='2'?"商家端":'平台端'}}</span>
               </template>
             </el-table-column>
             <el-table-column prop="grantType" label="发放类型" align="center">
               <template #default="scope">
                 <span>{{ scope.row.grantType=='1'?"线上":'线下'}}</span>
               </template>
             </el-table-column>
            <el-table-column prop="couponName" label="消费券配置名称" align="center"></el-table-column>
            <el-table-column prop="couponAmount" label="金额(元)"  align="center"></el-table-column>
           <el-table-column prop="ruleDescribe" label="规则描述"  align="center" width="200" show-overflow-tooltip></el-table-column>
            <el-table-column prop="orderNumber" label="到期时间"  align="center">
              <template #default="scope">
                <span>{{ parseTime(scope.row.expireTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="状态"  align="center">
              <template #default="scope">
                <div class="d-flex justify-center">
                  <MySwitch :value.sync="scope.row.couponStatus" :id="scope.row.couponStatus" text="启用|禁用" textValue="1|2" @changeStatus="handleChangeStatus(scope.row)" ></MySwitch>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建日期" align="center">
              <template #default="scope">
                <span>{{ parseTime(scope.row.createTime) }}</span>
              </template>
            </el-table-column>

            <el-table-column prop="name" label="操作"  width="150"  align="center" fixed="right">
              <template #default="scope">
                <div class="verticalBtn">
                  <!-- <el-button
                    size="medium"
                    type="text"
                    icon="el-icon-edit-outline"
                    @click="handleEdit(scope.row)"
                    v-has="'operatingTools:couponAllocation:edit'"
                  >修改</el-button>
                  <el-button
                    size="medium"
                    type="text"
                    icon="el-icon-delete-solid"
                    @click="handleDelt(scope.row)"
                    v-has="'operatingTools:couponAllocation:delt'"
                  >删除</el-button> -->
                  <el-button
                    size="medium"
                    type="text"
                    icon="el-icon-view"
                    @click="hanleView(scope.row)"
                  >查看</el-button>
                  <el-button
                    size="medium"
                    type="text"
                    icon="el-icon-shopping-cart-full"
                    @click="handleAddShop(scope.row)"
                    v-if="scope.row.couponType!='2'"
                  >商品管理</el-button>
                  <el-button
                    size="medium"
                    type="text"
                    icon="el-icon-shopping-cart-full"
                    @click="handleViewQrCode(scope.row)"
                    v-if="scope.row.grantType=='2'"
                  >线下二维码列表</el-button>


                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page" ref="page">
           <MyPagination
              v-show="total"
             :total="total"
             :page.sync="searchForm.pageNum"
             :limit.sync="searchForm.pageSize"
             @pagination="dataInfo"
           />
        </div>
      </el-col>
    </el-row>

    <!-- 消费券配置 -->
    <el-dialog :title="dialogTitle" width="700px" v-dialogDrag :visible.sync="addVisible" :close-on-click-modal="false" @close="addVisible = false">
      <el-form  :model="couponForm" id="userDialog" status-icon :rules="couponRules" ref="couponForm" label-position="right" >
        <el-form-item label="优惠券类型" prop="couponType" label-width="125px" >
          <el-select filterable clearable v-model="couponForm.couponType" placeholder="优惠券类型">
            <el-option label="系统劵" value="1"></el-option>
            <el-option label="商家券" value="2"></el-option>
          </el-select>
       </el-form-item>
       <el-form-item label="发放类型" prop="grantType" label-width="125px" >
          <!-- <el-select filterable clearable v-model="couponForm.grantType" placeholder="发放类型">
            <el-option label="线上" value="1"></el-option>
            <el-option label="线下" value="2"></el-option>
          </el-select> -->
          <el-radio-group v-model="couponForm.grantType">
          <el-radio label="1">线上</el-radio>
          <el-radio label="2">线下</el-radio>
        </el-radio-group>
       </el-form-item>
       <el-form-item label="发放数量" prop="grantQuantity" label-width="125px" v-if="couponForm.grantType=='2'">
          <el-input type="number" v-model="couponForm.grantQuantity" autocomplete="off" ></el-input>
        </el-form-item>
       <el-form-item label="商家列表" prop="storeId" label-width="125px" v-if="couponForm.couponType=='2'">
          <el-select filterable clearable v-model="couponForm.storeId" placeholder="商家列表">
            <el-option :label="item.storeName" :value="item.storeId" v-for="item in storeList"></el-option>
          </el-select>
       </el-form-item>
       <el-form-item label="配置名称" prop="couponName" label-width="125px" >
          <el-input type="text" v-model="couponForm.couponName" autocomplete="off"  maxlength="20" show-word-limit></el-input>
        </el-form-item>
       <!-- <el-form-item label="背景图片" prop="couponImage" label-width="125px" >
            <div class="d-flex">
              <MyUpImg :imagePreview='couponForm.couponImage'  imageSize="chang" @change="imageChange($event, 'couponImage')" ></MyUpImg>
            </div>
        </el-form-item> -->
        <el-form-item label="金额" prop="couponAmount" label-width="125px" >
           <el-input type="number" v-model="couponForm.couponAmount"  autocomplete="off"  style="width: 178px;">
             <template slot="append">元</template>
           </el-input>
        </el-form-item>
        <el-form-item label="到期时间" prop="expireTime" label-width="125px" >
          <el-date-picker  v-model="couponForm.expireTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date" placeholder="到期时间" style="width: 178px;margin-right:10px"></el-date-picker>
        </el-form-item>
        <el-form-item label="规则描述" prop="ruleDescribe" label-width="125px" >
           <el-input type="textarea" v-model="couponForm.ruleDescribe" autocomplete="off"  rows="6"></el-input>
         </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" v-if="dialogTitle!='查看配置'">
        <el-button @click="addVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="couponSubmit('couponForm')" size="small" :loading="btnLoading">保 存</el-button>
      </div>
    </el-dialog>

    <!-- 商品管理 -->
      <el-dialog title="商品管理" width="1000px" v-dialogDrag :visible.sync="addShopVisible" @close="addShopVisible = false" :close-on-click-modal="false">
        <el-dialog width="800px" :title="innerTitleVisible" :visible.sync="innerVisible" append-to-body v-dialogDrag >
           <div class="search">
              <el-form   id="searchBox" status-icon  class="demo-form-inline"   label-position="right" >
               <el-form-item prop="goodsName">
                 <el-input v-model="searchDialogForm.goodsName" clearable placeholder="请输入商品名称" ></el-input>
               </el-form-item>
               <el-form-item prop="storeName" style="margin:0 10px;">
                 <el-input v-model="searchDialogForm.storeName" clearable placeholder="请输入商家名称"></el-input>
               </el-form-item>
               <el-form-item class="clearfix">
                 <el-button type="primary" @click="handleDialogSearch()" icon="el-icon-search">查询</el-button>
               </el-form-item>
              </el-form>
           </div>
           <div class="table" ref="table">
             <el-table :data="dataListDialog" style="width: 100%;" row-key="id" border  default-expand-all stripe v-loading = "loading1" >
               <el-table-column prop="name" label="商品图片"  width="90">
                 <template #default="scope">
                    <el-image :src="scope.row.goodsImage" fit="fill" v-image-preview="scope.row.goodsImage" class="img"></el-image>
                 </template>
               </el-table-column>
               <el-table-column prop="goodsName" label="商品名称"   width="120">
                 <template #default="scope">
                   <span class="ellipsis-item2" :title="scope.row.goodsName">{{scope.row.goodsName}}</span>
                 </template>
               </el-table-column>
               <el-table-column prop="storeName" label="商家门店名称"  align="center" width="200" show-overflow-tooltip></el-table-column>

               <el-table-column prop="originalPrice" label="原价(元)"  align="center" width="120"></el-table-column>
               <el-table-column prop="salePrice" label="平台售价(元)"  align="center" width="120"></el-table-column>
               <el-table-column prop="name" label="操作"  min-width="90" align="center" fixed="right">
                 <template #default="scope">
                     <el-button
                       type="text"
                       @click="handleCheckShop(scope.row)"
                     >选择</el-button>
                 </template>
               </el-table-column>
             </el-table>


           </div>
           <div class="page" ref="page">
             <MyPagination
                :total="totalDialog"
                :page.sync="searchDialogForm.pageNum"
                :limit.sync="searchDialogForm.pageSize"
                @pagination="handleDialogList"
              />
           </div>
            <div slot="footer" class="dialog-footer">
              <el-button @click="innerVisible = false" size="small">取 消</el-button>
              <el-button type="primary" @click="handleActivityAddShopSubmit('addShopForm')" size="small" :loading="btnLoading">保 存</el-button>
            </div>
        </el-dialog>

        <div style="margin-bottom: 15px;display: flex;">
          <el-button type="primary" @click="handleActivityAddShop()" icon="el-icon-add" size="small">添加商品</el-button>
        </div>
        <el-table :data="activityShopList" style="width: 100%;"  border  @selection-change="handleSelectionChange"  stripe v-loading="activityShopLoading">
         <el-table-column prop="name" label="商品图片" width="100">
           <template #default="scope">
              <el-image :src="scope.row.goodsImage" fit="fill" v-image-preview="scope.row.goodsImage" class="img"></el-image>
           </template>
         </el-table-column>
         <el-table-column prop="goodsName" label="商品名称" >
           <template #default="scope">
             <span class="ellipsis-item2" :title="scope.row.goodsName">{{scope.row.goodsName}}</span>
           </template>
         </el-table-column>
        <el-table-column prop="name" label="操作" min-width="90" align="center">
           <template #default="scope">

              <el-button
                 type="text"
                 icon="el-icon-delete-solid"
                 @click="handleActivityDeltShop(scope.row)"
               >删除</el-button>
           </template>
         </el-table-column>
        </el-table>
    </el-dialog>


    <!-- 二维码列表 -->
      <el-dialog title="二维码列表" width="1000px" v-dialogDrag :visible.sync="qrcodeVisible" @close="qrcodeVisible = false" :close-on-click-modal="false">
        <div class="search">
           <el-button type="primary" @click="handleDialogSearch()" icon="el-icon-search">下载</el-button>
        </div>
       <div class="table" ref="table">
         <el-table :data="qrCodeList" style="width: 100%;"  border >
           <el-table-column  label="二维码信息"   >
             <template #default="scope">
               <span >{{scope.row.couponCode}}</span>

             </template>
           </el-table-column>
           <el-table-column  label="二维码"   >
             <template #default="scope">
               <div class="qrcode" :ref="'qrCode'+scope.row.couponCode" :id="'qrCode'+scope.row.couponCode"></div>
             </template>
           </el-table-column>
           <el-table-column label="状态"   width="120">
                <template #default="scope">
                  <span>{{scope.row.status=='1'?'待领取':'已领取'}}</span>
                </template>
              </el-table-column>
         </el-table>
       </div>
       <div class="page" ref="page">
         <MyPagination
            :total="qrCodeTotal"
            :page.sync="qrcodeDialogForm.pageNum"
            :limit.sync="qrcodeDialogForm.pageSize"
            @pagination="getCouponQRCodeListFn"
          />
       </div>
    </el-dialog>



  </div>
</template>

<script>
  import common from '@/api/api';
  import {
    getCouponList,addCoupon,addCouponGoods,couponConfigEnableOrDisable,BgetGoodsList,getCouponGoodsList,delCouponGoods,BgetStoreList,getCouponQRCodeList
  } from '@/api/getData'
  import option from '../../common/option.js';
  import Consumer from '../operatingTools/components/consumer';
  import QRCode from 'qrcodejs2';
  export default {
    data() {
      return {
        loading: false,
        btnLoading: false,
        createTime:[],
        typeList:[],
        expireTypeVal1:'',
        expireTypeVal2:'',
        expireTypeVal3:'',
        searchForm: {
          pageNum: 1,
          pageSize: 20,
        },
        dataList:[],
        total: 0,
        tableColumn:[],
        hideTableColumn:[],/*自定义表格列需要隐藏的*/
        tableColumnType:'staffManagement',/*自定义表格列类型传参*/
        typeList:[{name:'1',val:'1'}],//消费券类型
        tableHeight:0,//table 高度
        dialogTitle:'',
        addVisible:false,
        couponForm:{
          couponAmount:"",
          couponId:'',
          couponImage:'',
          couponName:'',
          couponStatus:'2',
          expireTime:'',
          ruleDescribe:"",
          couponType:'1',
          storeId:'',
          grantType:'1',
          grantQuantity	:'',
        },
        couponRules: {
          couponAmount: [{required: true, message: '请输入金额',trigger: 'blur'}],
          couponImage: [{required: true, message: '请上传背景图片',trigger: 'blur'}],
          couponName: [{required: true, message: '请输入配置名称',trigger: 'blur'}],
          expireTime: [{required: true, message: '请选择到期时间',trigger: 'blur'}],
          ruleDescribe: [{required: true, message: '请输入规则描述',trigger: 'blur'}],
          storeId: [{required: true, message: '请选择商家',trigger: 'blur'}],
          grantQuantity:[{required: true, message: '请输入发放数量',trigger: 'blur'}],
        },

        addShopVisible:false,
        searchDialogForm: {
          auditStatus: "2",
          goodsName:'',
          storeName:'',
          pageNum: 1,
          pageSize: 10,
        },
        dataListDialog:[],
        totalDialog:0,
        couponId:'',

        innerVisible:false,
        activityShopLoading:false,
        loading1:false,
        activityShopList:[],
        innerTitleVisible:"",
        storeList:[],

        qrcodeDialogForm: {
          couponId:'',
          storeId:'',
          pageNum: 1,
          pageSize: 20,
        },
        qrCodeList:[],
        qrcodeVisible:false,
        qrCodeTotal:0,

      }
    },
    components: {
      Consumer
    },
    computed: {
      pickerOptions: () => {
        return option.pickerOptions;
      }
    },
    mounted() {
      // setTimeout(res=>{
      //   console.log(333)
      //     let qrcode = new QRCode(this.$refs.qrcode333, {
      //         text: '1',
      //         width: 100,
      //         height: 100,
      //         colorDark: '#000000',
      //         colorLight: '#ffffff',
      //         correctLevel: QRCode.CorrectLevel.H
      //     })

      // },2000)
      console.log(33)
      this.getSelect();
      this.$nextTick(() => {
          this.tableHeight = this.$refs.index.offsetHeight  - this.$refs.actionBtn.offsetHeight - this.$refs.page.offsetHeight - 55;
      })
       this.dataInfo();
    },
    methods: {

      handleViewQrCode(row){
        this.qrcodeDialogForm.couponId = row.couponId;
        this.qrcodeDialogForm.storeId = row.storeId;
        this.getCouponQRCodeListFn();
        this.qrcodeVisible = true;
      },
      getCouponQRCodeListFn(){
        getCouponQRCodeList(this.qrcodeDialogForm).then((result) => {
            if (result.code == '200') {
              console.log(result)
                this.qrCodeTotal = result.total;
                this.qrCodeList = result.rows;
                this.$nextTick(res=>{
                  for(let i=0;i<result.rows.length;i++){
                    new QRCode(document.getElementById("qrCode"+result.rows[i].couponCode), {
                        text: '1',
                        width: 100,
                        height: 100,
                        colorDark: '#000000',
                        colorLight: '#ffffff',
                        correctLevel: QRCode.CorrectLevel.H
                    })
                  }
                })
             }else{
                this.$message.error(result.msg);
             }
         });
      },
      handleActivityDeltShop(row){
        this.$confirm(`您确定要删除商品吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delCouponGoods({relationId:row.relationId}).then((result) => {
            if (result.code == '200') {
                 this.activityShopListFn();
                 this.$message({
                   message: result.msg,
                   type: 'success'
                 });
             }else{
                this.$message.error(result.msg);
             }
         });
        }).catch((err) => {
            console.log(err);
        });
      },
      handleDialogSearch(){
          this.searchDialogForm.pageNum = 1;
          this.handleDialogList();
      },
      async handleCheckShop(row){
        try {
          let data = {
            couponId:this.couponId,
            goodsId: row.goodsId,
            goodsImage: row.goodsImage,
            goodsName: row.goodsName,
            storeId: row.storeId,
          }
          const result = await addCouponGoods(data);
          if (result.code == 200) {
            this.$message({
              message: result.msg,
              type: 'success'
            });
            this.innerVisible = false;
            this.activityShopListFn();
          } else {
            this.$message.error(result.msg);
          }
          this.loading1 = false;
        } catch (err) {
          this.loading1 = false;
          console.log(err)
        }
      },
      async handleDialogList() {
        try {
          this.loading1 = true;
          let result = await BgetGoodsList(this.searchDialogForm);
          if (result.code == 200) {
            this.totalDialog = result.total;
            this.dataListDialog = result.rows;
          } else {
            this.$message.error(result.msg);
          }
          this.loading1 = false;
        } catch (err) {
          this.loading1 = false;
          console.log(err)
        }
      },
      handleActivityAddShop(){
        this.addShopForm = {
          id:'',
          activityConfigId:this.activityConfigId,
          categoryId:'',
          categoryName:'',
          goodsSpu:''
        };
         this.innerTitleVisible = '新增商品'
        this.innerVisible = true;
        this.handleDialogList();
      },
      handleAddShop(row){
        this.couponId = row.couponId;
        this.activityShopListFn();
        this.addShopVisible = true;
      },
      async activityShopListFn(){
        try {
          this.activityShopLoading = true;
           const result = await getCouponGoodsList({couponId:this.couponId});
            if (result.code == 200) {
              this.activityShopList = result.rows;
            } else {
              this.$message.error(result.msg);
            }
             this.activityShopLoading = false;
        } catch (err) {
          this.activityShopLoading = false;
          console.log(err)
        }
      },
      imageChange(path, name) {
        this.couponForm[name] = path
      },
      /** 消费券配置提交 **/
      couponSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let data = JSON.parse(JSON.stringify(this.couponForm));

            this.btnLoading = true;
            if(data.id){
              addCoupon(data).then((result) => {
                if (result.code == 200) {
                  this.$message.success(result.msg);
                  this.addVisible = false;
                  this.dataInfo();
                } else {
                  this.$message.error(result.msg);
                }
              });
            }else{
              addCoupon(data).then((result) => {
                 if (result.code == 200) {
                   this.$message.success(result.msg);
                   this.addVisible = false;
                   this.dataInfo();
                 } else {
                   this.$message.error(result.msg);
                 }
               });
            }
             this.btnLoading = false;

          }
        })
      },
      resetSearch(){
        this.createTime = [];
        this.resetForm('searchForm');
        this.dataInfo();
      },
      async handleChangeStatus(row) {
        try {
          let data = {
            couponId: row.couponId,
            couponStatus: row.couponStatus,
          }
          const result = await couponConfigEnableOrDisable(data);
          if (result.code == 200) {
            this.$message.success(result.msg);
          } else {
            this.$message.error(result.msg);
            row.couponStatus = !row.couponStatus;
          }
        } catch (err) {
          console.log(err)
        }
      },
      /** 数据初始化请求动态列表数据 **/
      getSelect(){
        BgetStoreList({pageNum:'1',pageSize:10000}).then(res=>{
          this.storeList = res.rows;
        })
      },
      async dataInfo() {
        try {
          //let data = this.addDateRange(this.searchForm, this.createTime, 'createTimeStart', 'createTimeEnd');
          this.loading = true;
           console.log(3)
          const result = await getCouponList(this.searchForm);
          console.log(result,33)
          if (result.code == 200) {
            this.total = result.total;
            this.dataList = result.rows;
          } else {
            this.$message.error(result.msg);
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },

      handleSearch() {
        this.searchForm.pageNum= 1;
        this.dataInfo();
      },
      /** 删除当前列 **/
      handleDelt(row){
          this.$confirm('您确定要删除吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            couponConfigDel({id:row.id}).then((result) => {
              if (result.code == '200') {
                   this.dataInfo();
                   this.$message({
                     message: result.msg,
                     type: 'success'
                   });
               }else{
                  this.$message.error(result.msg);
               }
           });
          }).catch((err) => {
              console.log(err);
          });
      },

      /** 添加配置 **/
      handleAdd(){
        this.dialogTitle = '新增配置';
        this.couponForm = {
          couponAmount:"",
          couponId:'',
          couponImage:'',
          couponName:'',
          couponStatus:'2',
          expireTime:'',
          couponType:"1",
          grantType:'1',
          ruleDescribe:'',
          ruleDescribe:'',
          storeId:''
        };
        this.addVisible = true;
      },
      handleEdit(row){
        this.dialogTitle = '编辑配置';
        this.couponForm = {
          id:row.id,
          name:row.name,
          type:row.type+'',
          beforeGetPicUrl:row.beforeGetPicUrl,
          afterGetPicUrl:row.afterGetPicUrl,
          afterExpirePicUrl:row.afterExpirePicUrl,
          exchangeType:row.exchangeType,
          amount:row.amount,
          description:row.description,
          expireType:row.expireType,
          status:row.status,
          beforeGetText:row.beforeGetText,
          afterGetText:row.afterGetText,
          afterExpireText:row.afterExpireText
        };
        if(row.expireType=='1'){
          this.expireTypeVal1 =  row.expireValue;
        }else if(row.expireType=='2'){
          this.expireTypeVal2 =  row.expireValue;
        }else if(row.expireType=='3'){
          this.expireTypeVal3 =  row.expireValue;
        }
        this.addVisible = true;
      },
      hanleView(row){
        this.dialogTitle = '查看配置';
        this.couponForm = {
          couponAmount:row.couponAmount,
         couponId:row.couponId,
         couponImage:row.couponImage,
         couponName:row.couponName,
         couponStatus:row.couponStatus,
         expireTime:row.expireTime,
         ruleDescribe:row.ruleDescribe,
        };
        this.addVisible = true;
      },
      /** 表格选中状态改变 **/
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },

    }
  }
</script>

<style scoped lang="scss">
  .qrcode{
    width: 100px;
    height: 100px;
  }
  .title{
    text-align: center;
    margin:5px 0;
  }
  .el-table .el-dropdown-link{
      cursor: pointer;
      color: #61997A;
      margin-left: 5px;
  }
    .leftDialog{
      height:540px;
      overflow-y: auto;
    }
    .activeVerticalBox .activeItem{
      color:#61997A;
      cursor: pointer;
      margin: 0px;
      text-align: center;
      height:20px;
      line-height: 20px;
    }
    .activeVerticalBox .el-dropdown{
      display: flex;
      justify-content: center;
      color:#61997A;
      cursor: pointer;
    }
    .activeCheckedBox{
      border-top: 1px solid #ddd;
      padding:10px;
      height:52px;
      .el-tag{
        margin-right:10px;
      }
    }

</style>
